﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.master" AutoEventWireup="true" 
	CodeBehind="Animation.aspx.cs" Inherits="C1PieChart_Animation" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" namespace="C1.Web.Wijmo.Controls.C1Chart" tagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
	<script type="text/javascript">
		function hintContent() {
		    return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
		}
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
	<wijmo:C1PieChart runat="server" ID="C1PieChart1" ShowChartLabels="false" Height="475" Width = "756" CssClass ="ui-widget ui-widget-content ui-corner-all">
		<Hint>
			<Content Function="hintContent" />
		</Hint>
		<Header Text="MMO套餐市场份额">
		</Header>
		<Animation Enabled="false" />
		<SeriesStyles>
			<wijmo:ChartStyle Stroke="#3e5f77" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#466a85" ColorEnd="#3e5f77"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#494949" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#525252" ColorEnd="#494949"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#4c5454" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#555e5e" ColorEnd="#4c5454"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#2d2d2d" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#333333" ColorEnd="#2d2d2d"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#5f9996" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#6aaba7" ColorEnd="#5f9996"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#959595" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#a6a6a6" ColorEnd="#959595"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#617779" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#6c8587" ColorEnd="#617779"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#b2c76d" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#c7de7a" ColorEnd="#b2c76d"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#7fc73c" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#8ede43" ColorEnd="#7fc73c"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#afe500" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#c3ff00" ColorEnd="#afe500"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#959595" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#a6a6a6" ColorEnd="#959595"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#4aa6e2" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#53b9fc" ColorEnd="#4aa6e2"></Fill>
			</wijmo:ChartStyle>
			<wijmo:ChartStyle Stroke="#4a6ee2" StrokeWidth="1.5">
				<Fill Type="LinearGradient" LinearGradientAngle="45" ColorBegin="#537bfc" ColorEnd="#4a6ee2"></Fill>
			</wijmo:ChartStyle>
		</SeriesStyles>
		<SeriesList>
			<wijmo:PieChartSeries Label="RuneScape" Data="7.5">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Lineage" Data="6.6">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Lineage II" Data="6.3">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Final Fantasy XI" Data="3.1">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Dofus" Data="2.8">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="EVE Online" Data="1.5">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Everquest II" Data="1.2">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="EverQuest" Data="1.1">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Lord of the Rings Online" Data="0.9">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="City of Heroes / Villains" Data="0.8">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="Tibia" Data="0.6">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="All Others" Data="5.4">
			</wijmo:PieChartSeries>
			<wijmo:PieChartSeries Label="World of Warcraft" Data="62.2">
			</wijmo:PieChartSeries>
		</SeriesList>
	</wijmo:C1PieChart>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" Runat="Server">
	<p>此示例展示了如何增加自定义动画来加强饼图的美观效果。</p><br/>
	<p>此示例使用以下属性定义饼图的爆炸和规模效应。</p>
	<ul>
		<li><strong>Animation.Enabled </strong>在服务器端。</li>
		<li><strong>getSector</strong> 在客户端指定的部分。</li>
		<li><strong>getOffset </strong>在客户端计算水平和垂直方向的偏移。</li>
	</ul>
	<p><strong>C1PieChart </strong>存在默认的爆炸动画特效，我们可以设置<strong> Animation.Enabled</strong>为False，关闭默认的动画效果。</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" Runat="Server">
	<div>
		动画：
		<select id="selAnimation">
			<option selected="selected">规模</option>
			<option>爆炸</option>
			<option>无</option>
		</select>
	</div>
	<script type="text/javascript">
		var duration = 500;
		var radiusOffset = 10;
		var offset = {};
		$(document).ready(function () {
			var piechart = "#<%=C1PieChart1.ClientID %>";
			$(piechart).bind("c1piechartmouseover", function (e, objData) {
				if (objData != null) {
					var animation = $("#selAnimation").val();

					if (animation == "None") {
						return;
					}

					var series = objData;
					var sector = $(piechart).c1piechart("getSector", series.index);
					var shadow = sector.shadow;
					var tracker = sector.tracker;

					//Scale
					if (animation == "Scale") {
						var center = sector.center;
						sector.animate({
							transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y)
						}, duration, "elastic");

						if (shadow) {
							shadow.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
					}
					//Explode
					else {
						offset = sector.getOffset(radiusOffset);

						sector.animate({
							translation: offset.x + " " + offset.y
						}, duration, "elastic");

						if (shadow) {
							shadow.animate({
								translation: offset.x + " " + offset.y
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								translation: offset.x + " " + offset.y
							}, duration, "elastic");
						}
					}
				}
			});

			$(piechart).bind("c1piechartmouseout", function (e, objData) {
				if (objData != null) {
					var animation = $("#selAnimation").val();

					if (animation == "None") {
						return;
					}

					var series = objData;
					var sector = $(piechart).c1piechart("getSector", series.index);
					var shadow = sector.shadow;
					var tracker = sector.tracker;

					//Scale
					if (animation == "Scale") {
						sector.animate({
							transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y)
						}, duration, "elastic");
						if (shadow) {
							shadow.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
					}
					//Explode
					else {
						sector.animate({
							translation: -offset.x + " " + offset.y * -1
						}, duration, "elastic");

						if (shadow) {
							shadow.animate({
								translation: -offset.x + " " + offset.y * -1
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								translation: -offset.x + " " + offset.y * -1
							}, duration, "elastic");
						}
						offset = { x: 0, y: 0 };
					}
				}
			});
		});
	</script>
</asp:Content>

